<template>
  <n-card title="算法列表" :bordered="false">
    <n-space vertical>
      <n-data-table
        :columns="columns"
        :data="algorithmList"
        :pagination="pagination"
        :loading="loading"
        :scroll-x="1200"
      />
    </n-space>


    <!-- 编辑参数覆盖页面 -->
    <n-drawer v-model:show="showEditDrawer" :width="800" placement="right">
      <n-drawer-content title="编辑算法参数" closable>
        <EditAlgorithmParams
          v-if="showEditDrawer"
          :algorithm="selectedAlgorithm"
          @save="handleSave"
          @close="showEditDrawer = false"
        />
      </n-drawer-content>
    </n-drawer>
  </n-card>
</template>

<script lang="ts" setup>
import { h, ref, reactive, onMounted } from 'vue';
import { NDataTable, NButton, NTag, NSpace, NDrawer, NDrawerContent, useMessage } from 'naive-ui';
import EditAlgorithmParams from './EditAlgorithmParams.vue';

import {Algorithm, GetAlgorithms, EditAlgParams} from "@/api/analysis/algorithm";

const message = useMessage();
const loading = ref(false);
const showEditDrawer = ref(false);
const selectedAlgorithm = ref(null);


// 设置页面标题
const setPageTitle = () => {
  document.title = '算法列表 - 分析中心';
};

onMounted(() => {
  setPageTitle();
  fetchAlgorithmList(); // 新增
});

const algorithmList =  ref<ReadonlyArray<Algorithm>>([]);
// 初始化算法列表
async function fetchAlgorithmList() {
  try {
    loading.value = true;
    const res = await GetAlgorithms({
      page: pagination.page,
      pageSize: pagination.pageSize
    });
    algorithmList.value = res.map(item => ({
      id: item.id,
      code: item.code,
      englishName: item.englishName,
      chineseName: item.chineseName,
      level: item.level,
      version: item.version,
      default_params: item.default_params
    }));
  } catch (error) {
    message.error('获取算法列表失败');
    console.error(error);
  } finally {
    loading.value = false;
  }
}

// 分页配置
const pagination = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 20, 30],
  showQuickJumper: true
});

// 表格列配置
const columns = ref([
  { title: '序号', key: 'id', width: 80 },
  { title: '算法ID', key: 'algorithmId' },
  { title: '算法英文名称', key: 'englishName' },
  { title: '算法中文名称', key: 'chineseName' },
  {
    title: '算法等级',
    key: 'level',
    render(row) {
      const levelMap = {
        0: { text: '基础算法', color: 'green' },
        1: { text: '高级算法', color: 'orange' },
        2: { text: '专业算法', color: 'red' }
      };
      const levelInfo = levelMap[row.level] || { text: '未知', color: 'default' };
      return h(NTag, { type: levelInfo.color }, levelInfo.text);
    }
  },
  {
    title: '操作',
    key: 'actions',
    render(row) {
      return h(NButton, {
        size: 'small',
        type: 'primary', // 添加type属性
        onClick: () => handleEdit(row)
      }, '编辑');
    }
  }
]);


function handleEdit(row) {
  selectedAlgorithm.value = row;
  showEditDrawer.value = true;
}

// 保存编辑
async function handleSave(row) {
  try {
    // 调用API保存编辑后的参数
    await EditAlgParams(row.id, row.default_params);
    message.success('参数保存成功');
    showEditDrawer.value = false;
    // 刷新数据
    fetchAlgorithmList();
  } catch (error) {
    message.error('保存失败');
    console.error('保存失败:', error);
  }
}
</script>
